/* eslint-disable react-refresh/only-export-components */
import React from 'react';
import RootHeader from '@/components/root/header';
import RootMenu from '@/components/root/menu';
import { Layout} from 'antd';
import styles from '@/views/root/css/root.module.less'
import logo from '@/assets/images/logo.svg'
const { Sider, Content ,Footer} = Layout;
import { Outlet } from 'react-router-dom';
import useAppStore ,{selectCollapsed}from "@/store/app-store";
import { initUser } from '@/store/user-store';
import { getMenuApi } from '@/api/user-api';
import to from 'await-to-js';

const Root: React.FC = () => {

  const collapsed =useAppStore(selectCollapsed)
  
  return (
    <Layout className={styles.container}>
        {/*侧边栏*/}
      <Sider trigger={null} collapsible collapsed={collapsed}>

        {/*logo区*/}
        <div className={styles.boxLogo}>
            <img src={logo} alt="logo" className={styles.logo}/>
            {/*折叠与否展示文字 */}
            {!collapsed && <span className={styles.logoText}>文章管理系统</span>}
        </div>
        {/*左侧菜单*/}
        <RootMenu/>
      </Sider>

      <Layout>
        {/*头部区 */}
        <RootHeader/>
        {/*内容区 */}
        <Content
          className={styles.content}
        >
          <Outlet/>
        </Content>
        {/*底部区*/}
        <Footer className={styles.footer}>Powerd by &copy; WX</Footer>
      </Layout>
    </Layout>
  );
};

export default Root;


export const loader =async() =>{
  //路由匹配成功后，将要渲染root前先调用，获取全局信息
    initUser()

  //左侧菜单列表数据
    const [err,res] =await to(getMenuApi())

    if(err) return null
  
    return {menus:res.data}
}

